<template>
  <el-dialog
    :title="title"
    append-to-body
    :visible.sync="dialogVisible"
    custom-class="customWidth"
    :before-close="handleClose"
  >
    <!-- <el-steps :active="active" finish-status="success">
            <el-step title="步骤 1" :key="1"></el-step>
            <el-step title="驳回" :key="2" status="error"></el-step>
            <el-step title="步骤 3" :key="3"></el-step>
            <el-step title="步骤 4" :key="4"></el-step>
        </el-steps> -->
    <el-steps
      :active="activeStep"
      direction="horizontal"
      align-center
      class="back-step"
    >
      <el-step
        title="发起退款"
        :class="{ current: activeStep === 0 }"
      ></el-step>
      <el-step
        :title="isRejected ? '驳回' : '审批中'"
        :class="{ current: activeStep === 1 }"
        :status="isRejected ? 'error' : undefined"
      ></el-step>
      <el-step title="退款中" :class="{ current: activeStep === 2 }"></el-step>
      <el-step title="已退款" :class="{ current: activeStep === 3 }"></el-step>
    </el-steps>
    <div style="margin: 10px 50px 0">
      <el-alert
        v-if="backOrigin && isRejected && ruleForm.remark"
        :title="ruleForm.remark"
        type="error"
        show-icon
      >
      </el-alert>
    </div>
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="80px"
      :disabled="disable"
      class="demo-form-inline inputForm"
    >
      <el-form-item label="退款金额" prop="paid_money">
        <el-input
          v-model="ruleForm.paid_money"
          disabled
          style="width: 100px"
        ></el-input>
      </el-form-item>
      <el-form-item label="退款原因" prop="reason">
        <el-input v-model="ruleForm.reason"></el-input>
      </el-form-item>
      <el-form-item label="上传图片" prop="images">
        <UploadFile
          class="back-imgs"
          :images.sync="ruleForm['images']"
          :disabled="disable"
        ></UploadFile>
      </el-form-item>
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="80px"
        :disabled="reviewType === 2 || activeStep === 2 || activeStep === 3"
      >
        <el-form-item label="审批备注" prop="remark" v-if="reviewOrigin">
          <el-input type="textarea" v-model="ruleForm.remark"></el-input>
        </el-form-item>
      </el-form>
    </el-form>
    <div slot="footer" class="dialog-footer" style="text-align: center">
      <template v-if="reviewOrigin">
        <el-button
          v-show="activeStep === 1 && (reviewType === 1 || reviewType === 3)"
          type="primary"
          @click="handleReview(1)"
          >通过</el-button
        >
        <el-button
          v-show="activeStep === 1 && (reviewType === 0 || reviewType === 3)"
          type="danger"
          @click="handleReview(0)"
          >驳回</el-button
        >
      </template>
      <!-- 申请退款时显示 -->
      <el-button
        v-if="backOrigin && activeStep === 0"
        type="primary"
        @click="handleOperation('add')"
        >发起退款</el-button
      >
      <!-- 取消退款 -->
      <el-button
        v-if="backOrigin && activeStep === 1"
        type="danger"
        @click="handleOperation('cancel')"
        >取消退款</el-button
      >
      <!-- 审批中/驳回后支持修改 -->
      <el-button
        v-if="backOrigin && activeStep === 1"
        type="primary"
        @click="handleOperation('edit')"
        >修改退款信息</el-button
      >
      <el-button @click="handleClose">关闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
import UploadFile from "@/components/uploadFile/index.vue";
import {
  WechatpayAuditReject,
  WechatpayAuditPass,
  WechatpayRefundDetail,
  WechatpayRefundAdd,
  WechatpayRefundUpdate,
  WechatpayRefundCancel,
  WaybillpayRefundAdd,
  WaybillpayRefundUpdate,
  WaybillpayRefundCancel,
} from "@/api/finance";

import { reqPaymentStatus, WaybillPaymentStatus } from "@/api/waybill";

export default {
  name: "index",
  components: { UploadFile },
  /**
   * origin  | review 来自审核   reviewType  1通过 0驳回
   * reviewId 审核的id
   */
  props: [
    "dialogVisible",
    "origin",
    "reviewType",
    "reviewId",
    "orderId",
    "waybillId",
    "payStatus",
  ],

  data() {
    return {
      title: "申请退款",
      // currentStep: 0,
      ruleForm: {
        paid_money: "",
        images: [],
        // 0未支付;1已支付;2已关闭;3退款中;4已退款;5退款审批中;6退款申请驳回

        status: 1,
      },
      rules: {
        reason: [
          { required: true, message: "请填写退款原因", trigger: "blur" },
        ],
        images: [{ required: true, message: "请上传图片", trigger: "blur" }],
      },
      isRejected: false,
    };
  },
  computed: {
    disable() {
      // 审核/退款中/已退款 展示详情，不能编辑
      return (
        this.reviewOrigin || this.activeStep === 2 || this.activeStep === 3
      );
    },
    // 审核
    reviewOrigin() {
      return this.origin === "review";
    },
    // 退款
    backOrigin() {
      return this.origin === "order" || this.origin === "waybill";
    },
    // 运单
    waybillOrigin() {
      return this.origin === "waybill";
    },
    // 参数
    id_params() {
      let params = {};
      if (this.origin === "review") {
        params = { id: this.reviewId * 1 };
      } else if (this.origin === "order") {
        params = { order_id: this.orderId * 1 };
      } else if (this.origin === "waybill") {
        params = { waybill_id: this.waybillId * 1 };
      }
      return params;
    },
    // 当前step
    // 0-发起退款 1-审核中 2-退款中 3-已退款
    activeStep() {
      // 0未支付;1已支付;2已关闭;3退款中;4已退款;5退款审批中;6退款申请驳回
      switch (this.ruleForm.status) {
        case 0:
          return 0;
        case 1:
          return 0;
        case 2:
          return 0;
        case 3:
          return 2;
        case 4:
          return 3;
        case 5:
          return 1;
        case 6:
          this.isRejected = true;
          return 1;
        default:
          return 0;
      }
    },
  },
  mounted() {
    // "id":0,
    // "order_id":0,
    // "waybill_id":31357,// 三选一
    let params = {};
    if (this.origin === "review") {
      params = { id: this.reviewId * 1 };
    } else if (this.origin === "order") {
      params = { order_id: this.orderId * 1 };
    } else if (this.origin === "waybill") {
      params = { waybill_id: this.waybillId * 1 };
    }

    // console.log(this.payStatus, 'ppppppppppppppp');
    // 订单运单 >1,审核进来调去详情
    if ((this.backOrigin && this.payStatus * 1 >= 1) || this.reviewOrigin) {
      WechatpayRefundDetail(params).then((res) => {
        if (res.data.data) {
          this.ruleForm = res.data.data;
          // 通过、驳回操作时把remark清除
          if (
            this.reviewOrigin &&
            (this.reviewType === 0 || this.reviewType === 1)
          ) {
            this.ruleForm.remark = "";
          }
        }
      });
    }
    if (this.backOrigin && this.payStatus * 1 <= 1) {
      // 获取退款金额
      let fn = this.waybillOrigin ? WaybillPaymentStatus : reqPaymentStatus;
      fn(this.id_params).then((res) => {
        this.ruleForm.paid_money = res.data.paid_money;
      });
    }
  },
  methods: {
    handleClose() {
      this.$emit("close");
    },
    handleOperation(type) {
      this.$refs["ruleForm"].validate((valid) => {
        if (!valid) return;
        if (type === "add" || type === "edit") {
          let Fn;
          if (this.waybillOrigin) {
            Fn = type === "add" ? WaybillpayRefundAdd : WaybillpayRefundUpdate;
          } else {
            Fn = type === "add" ? WechatpayRefundAdd : WechatpayRefundUpdate;
          }
          Fn({
            ...this.ruleForm,
            ...this.id_params,
          }).then((res) => {
            if (res.code === 10000) {
              this.$message({
                message: res.data.result,
                type: "success",
              });
              this.$emit("close", true);
            } else {
              this.$message({
                message: res.message,
                type: "error",
              });
            }
          });
        } else if (type === "cancel") {
          let cancelFn;
          if (this.waybillOrigin) {
            cancelFn = WaybillpayRefundCancel;
          } else {
            cancelFn = WechatpayRefundCancel;
          }
          cancelFn(this.id_params).then((res) => {
            if (res.code === 10000) {
              this.$message({
                message: "取消申请退款成功",
                type: "success",
              });
              this.$emit("close", true);
            } else {
              this.$message({
                message: res.message,
                type: "error",
              });
            }
          });
        }
      });
    },
    handleReview(type) {
      this.$refs["ruleForm"].validate((valid) => {
        if (!valid) return;
        if (type === 0 && !this.ruleForm.remark) {
          this.$message({
            message: "请填写审批备注",
            type: "warning",
          });
          return;
        }
        const reviewFn = type === 1 ? WechatpayAuditPass : WechatpayAuditReject;
        reviewFn({
          id: this.reviewId,
          remark: this.ruleForm.remark,
        }).then((res) => {
          if (res.code === 10000) {
            this.$message({
              message: "操作成功",
              type: "success",
            });
            this.$emit("close", true);
          } else {
            this.$message({
              message: res.message,
              type: "error",
            });
          }
        });
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.wrapper {
}

/deep/.customWidth {
  width: 700px !important;

  .el-dialog__body {
    padding: 20px 0;
  }
}

/deep/.back-imgs .el-upload--picture-card {
  width: 100px;
  height: 100px;
  line-height: 100px;
}

/deep/.back-imgs .el-upload-list__item,
.back-imgs .el-upload-list__item-thumbnail {
  width: 100px !important;
  height: 100px !important;
}

/deep/.el-step__head.is-success:not(:last-child) {
  /* CSS 样式 */
  //   &.el-step__line{
  //     background: #67C23A !important;
  //   }
}

.back-step {
  /deep/.current {
    .el-step__title,
    .el-step__head {
      font-weight: 400;
      color: #409eff;
      border-color: #409eff;

      &.is-error {
        color: #f56c6c;
        border-color: #f56c6c;
      }
    }
  }

  /deep/.el-step__head.is-finish {
    .el-step__line {
      background-color: #409eff;
    }
  }
}

.demo-form-inline {
  padding: 10px 70px;
}
</style>